<!DOCTYPE html>
<html>
	<head>
		<title>左右div</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				height: 100%;
				width: 100%;
			}

			body {
                margin: 0;
				--overflow: auto;
				background-color: black;
			}

			.cs-div01{
				border: solid thin red;
				background-color: darkgreen;
				color: skyblue;
				
				--float:left;
				
				font-size: 14pt;
				
				
				height:100%;
				width:300px;
			}
			
			.cs-div02{
				border: solid thin blue;
				background-color: #00003f;
				color: white;
				
				--float:left;
				
				font-size: 14pt;
				
				position: absolute;
				left: 300px;
				top: 0px;
				
				height:100%;
				width:calc(100% - 300px);
			}
		</style>
    </head>
    
	<body>

        <div id="id_div01_left" class="cs-div01">
					这是在左边的div中<br>
					height:100%;<br>
					width:300px;<br>
					左边的div宽度固定
        </div>
        <div id="id_div02_right" class="cs-div02">
					这是在右边的div中<br>
					height:100%;<br>
					width:300px;<br>
					右边的div宽度占满剩余空间
        </div>

    </body>

</html>

